<template>
  <view class="wrap">
    <view class="list">
      <view @click="goPrivateChat(item)" v-for="item in list" class="item">
        <image :src="item.avatar" style="width:100rpx;height: 100rpx;border-radius: 16rpx"/>
        <view class="info">
          <text class="name">{{ item.name }}</text>
          <text class="id">用户编号：{{ item.id }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
 import {ref} from "vue";
 import {onLoad} from "@dcloudio/uni-app";
 import {loginApi} from "@/api";
 import type {User} from "@/types/user";

 const list = ref<User[]>([]) // 用户列表

 // 获取用户列表
 const getUserList = async () => {
   uni.showLoading()
  let res = await loginApi.getUserList()
   list.value = res.data
   uni.hideLoading()
 }

 // 去私聊
 const goPrivateChat = (item:any) => {
   uni.navigateTo({
      url: `/pages/privateChat/privateChat?id=${item.id}&name=${item.name}`

   })
 }

 onLoad(()=>{
    getUserList()
 })
</script>


<style scoped lang="scss">
.wrap{
  padding: 20rpx;

}
.list{
  border-radius: 20rpx;
  background: #fff;
  padding: 20rpx;

}
.item{
  display: flex;
  align-items: center;
  margin-bottom:20rpx;
  image{
    margin-right: 16rpx;
  }
}
.info{
  display: flex;
  flex-direction: column;
}
.id{
  color: #808080;
  font-size: 24rpx;
}
</style>
